<template>
	<div class="max">
		<my-header :backBtn="true">
			<div slot="title">发布公告</div>
			<div slot="right" @click="back">
				确定
			</div>
		</my-header>
		<div class="cont-nof">
			<search-bar :value="searchValue" @on-change="searchFn" @on-cancle="cancleFn" @on-clear="cancleFn"></search-bar>
			<div class="cont-nos">
				<div class="shadow optBox" v-for="(item,index) in list" :key="index">
					<div class="flex tl opt-type" style="justify-content: space-between;">
						<div>{{item.title}}</div>
						<div class="weui-cells weui-cells_checkbox select-all fr">
							<label class="weui-cell weui-check__label my-weui-cell-select">
								<div class="weui-cell__bd">
									<p class="select-text">全选</p>
								</div>
								<div class="weui-cell__hd my-weui-cell__hd">
									<input type="checkbox" class="weui-check" v-model="item.all" @click="selectAll(item.key,item.all)">
									<i class="weui-icon-checked"></i>
								</div>
							</label>
						</div>
					</div>
					<div class="flex opt-name">
						<div class="weui-loadmore weui-loadmore_line" v-if="item.list.length==0">
							<div class="weui-loadmore__tips">暂无数据</div>
						</div>
						<span v-else v-for="(list,secindex) in item.list" :key="secindex" :class="{'select-span':!reg(item.key,list)}"
						 @click="select(item.key,list)">
							{{list.name}}
						</span>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				resultVisible: false,
				searchValue: '',
				list: {
					teacher: {
						key: 'teacher',
						title: '教师',
						list: [],
						all: false
					},
					kinsfolk: {
						key: 'kinsfolk',
						title: '家长',
						list: [],
						all: false
					}
				},
				selectList: {
					teacher: [],
					kinsfolk: [],
				},
				setText: [],
			}
		},

		methods: {
			reg(key, data, callback) { //验证该人员是否被选中
				let num = 0;
				for (let i = 0; i < this.selectList[key].length; i++) {
					if (this.selectList[key][i].id == data.id) {
						if (callback) {
							callback(i)
						}
						return false;
					} else {
						num++;
					}
				}
				if (num == this.selectList[key].length) return true;
			},
			select(key, data) { //添加
				let _this = this;
				if (this.selectList[key].length == 0) {
					this.selectList[key].push(data);
				} else {
					let io = this.reg(key, data, function(i) {
						_this.selectList[key].splice(i, 1);
					});
					if (io) {
						this.selectList[key].push(data)
					}
				};
				//控制全选按钮是否勾选
				if (this.selectList[key].length == this.list[key].list.length) {
					this.list[key].all = true;
				} else {
					this.list[key].all = false;
				}
			},
			selectAll(key, io) {
				if (!io) {
					for (let i = 0; i < this.list[key].list.length; i++) {
						this.selectList[key].push(this.list[key].list[i])
					}
				} else {
					this.selectList[key] = [];
				}
			},
			searchFn(val) {
				this.searchValue = val;
				this.queryFn();
			},
			cancleFn() {
				this.searchValue = '';
				this.queryFn();
			},
			back() {
				for (let i in this.selectList) {
					if (this.selectList[i].length == this.list[i].list.length) {
						this.setText.push('全部' + this.list[i].title);
					} else {
						for (let item = 0; item < this.selectList[i].length; item++) {
							this.setText.push(this.selectList[i][item].name)
						}
					}
				}
				this.$router.push({
					path: '/makeAnAt',
					query: {
						data: this.selectList,
						text: this.setText.join('、')
					}
				})
			},
			queryFn() {
				this.$http.fetchReceiver({
					name: this.searchValue
				}).then(resp => {
					this.list.teacher.list = resp.data.teacherList;
					this.list.kinsfolk.list = resp.data.kinsfolkList;
				})
			}
		},
		created() {
			if (this.$route.query.teacher && this.$route.query.kinsfolk) {
				this.selectList.teacher = this.$route.query.teacher;
				this.selectList.kinsfolk = this.$route.query.kinsfolk;
			}
			this.queryFn();
		}
	}
</script>

<style scoped>
	.optBox {
		width: 95%;
		padding: 1rem;
		box-sizing: border-box;
		margin: 1rem auto;
		background: #fff;
	}

	.opt-type {
		position: relative;
		font-weight: bold;
		padding-left: 1rem;
	}

	.opt-type::after {
		content: '';
		position: absolute;
		width: 0.5rem;
		height: 60%;
		background: #2aa7e1;
		transform: translateY(-50%);
		top: 50%;
		left: 0%;
	}

	.select-all {
		font-size: 1.6rem;
		float: right;
		width: 6rem;
		font-weight: normal;
	}

	.opt-name {
		margin: 1rem 0;
		flex-wrap: wrap
	}

	.opt-name span {
		width: 21%;
		margin: 2%;
		padding: 0.5rem 0;
		box-sizing: border-box;
		border-radius: 5px;
		border: 1px solid #2aa7e1;
		font-size: 1.4rem;
	}

	.opt-name span.select-span {
		background: #2aa7e1;
		color: #fff;
	}

	.opt-name span.name-long {
		width: 31%;
		margin: 1%;
	}

	.my-select-result {
		justify-content: space-between;
		font-size: 1.4rem;
	}
</style>
